<page-header recursiveBreadcrumb [action]="action" [extra]="extra">
  <ng-template #action>
    <nz-button-group>
      <button nz-button (click)="backList()">返回列表</button>
    </nz-button-group>
  </ng-template>
  <ng-template #extra>
    <div nz-row>
      <div nz-col nzXs="24" nzSm="24">
        <p class="text-grey">状态</p>
        <nz-tag *ngIf="!role.deleted" [nzColor]="'#f50'">禁用</nz-tag>
        <nz-tag *ngIf="role.deleted" [nzColor]="'#87d068'">启用</nz-tag>
      </div>
    </div>
  </ng-template>
  <sv-container size="small" col="2">
    <sv label="名称">{{ role.name }}</sv>
    <sv label="编码">{{ role.code }}</sv>
    <sv label="描述">{{ role.description }}</sv>
  </sv-container>
</page-header>

<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-card nzTitle="菜单">
      <nz-tree [nzData]="menuTree" (nzClick)="menuClick($event)" [nzCheckStrictly]="true">
        <ng-template #nzTreeTemplate let-node let-origin="origin">
          <span>{{ node.title }}</span>
          <span *ngIf="origin.checked">
            <i nz-icon nzType="check-circle" nzTheme="twotone" style="margin-left: 10px"></i>
          </span>
        </ng-template>
      </nz-tree>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card nzTitle="权限" [nzExtra]="permissionTemplate">
      <st [widthMode]="{ type: 'strict' }" [data]="currentMenuPermissions" [columns]="permissionColmuns">
        <ng-template st-row="operation" let-item let-index="index">
          <nz-switch [ngModel]="item.checked" (ngModelChange)="refreshPermission(index, $event)"></nz-switch>
        </ng-template>
      </st>
    </nz-card>
    <ng-template #permissionTemplate>
      <button nz-button nzType="primary" (click)="save()">保存</button>
    </ng-template>
  </div>
</div>
